//视口查询
function GetRect(element) {
  let rect = element.getBoundingClientRect(); // 距离视窗的距离
  return {
    top: rect.top ,
    bottom: rect.bottom ,
    left: rect.left ,
    right: rect.right,
  };
}

function Rolling_in(target,callback,callback_count) {
  let elements = document.getElementsByClassName(target);
  // let divH = $target.offsetHeight // div高度
  if (!elements) return null; //平稳退化
  
  for (let element of elements) {
    
    window.addEventListener("scroll", () => {
      let windowH =window.innerHeight ||document.documentElement.clientHeight ||document.body.clientHeight; // 浏览器高度兼容写法
 
      let obj = GetRect(element);
      // console.log("windowH:"+windowH+",obj.top:"+obj.top+"obj.bottom"+obj.bottom);
      if (obj.top >= windowH) {
        // 在视口之下
        //这时应该让元素消失
        element.setAttribute("style", "opacity:0;transition:0s");
      }
      // if (obj.top < windowH && obj.bottom >= window) { // 正在出现
      //   element.setAttribute("style", "opacity:1;transition:2s;");
      // }
      if (
        obj.top < windowH &&
        obj.bottom > 0 &&
        obj.bottom < windowH
      ) {
        // 正在视口中
        //这时应该让元素显示
        element.setAttribute("style", "opacity:1;");
         if(callback&&callback_count){
          callback();
         callback_count--;
       }
      }
    });
  }
}
Rolling_in("piece");
